<template>
  <div class="home">
    <div class="search">
      <div class="searchbtn">
        <input v-model="searchData.clubId" type="text" placeholder="输入门店号">
        <img src="../../../../static/images/Magnifier.png">
      </div>
      <div class="info" @click="settype(2)">
        <h1>任务状态</h1>
        <div class="right">
          <span>{{ searchData.taskStatus | changeStatus }}</span>
          <i class="el-icon-arrow-right" />
        </div>
      </div>
    </div>
    <div class="submit flex-cc">
      <div class="btn btn_reset" style="margin-right:5px;" @click="reset">重置</div>
      <div class="btn" style="margin-left:5px;" @click="search">搜索</div>
    </div>
    <WPTX_PICKER :show="show" :link="link" :columns="columns" :default-data="defaultData" :select-data="pickData" @cancel="close" @confirm="confirmFn" />
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import $ from 'jquery'
import VueResource from 'vue-resource'
import _validate from '../commonJs/wptx_validate'
import _tools from '../commonJs/wptx_tools'
import _common from '../commonJs/wptx_common'
import _storewxtaskAPI from '../API/storewxtaskapi'
import WPTX_NAV from '../commonTemplate/wptx_nav'
import WPTX_PICKER from '../commonTemplate/picker'
import {
  years,
  month,
  day,
  hours,
  minutes,
  seconds
} from '../commonTemplate/lib/data'
const _FUNCTION_NAME = _common.pageName.WPTXTASKSTORESTATCHOOSE
const _ROUTER_NAME = _common.router.TASTLIST
export default {
  components: {
    WPTX_NAV: WPTX_NAV,
    WPTX_PICKER: WPTX_PICKER
  },
  filters: {
    changeStatus(val) {
      switch (parseInt(val)) {
        case 0:
          return '未完成'
        case 1:
          return '已完成'
      }
    }
  },
  data() {
    return {
      tableData: {
        taskList: []
      },
      show: false,
      columns: 5,
      link: true,
      defaultData: [],
      pickData: {
        data1: years,
        data2: month,
        data3: day,
        data4: hours,
        data5: minutes,
        data6: seconds
      },
      searchData: {
        clubId: '', // 任务标题 ,
        taskStatus: '' // 任务状态（门店任务状态） ,
      },
      searchDataBuffer: {},
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        type: 0, // 当前栏目（0待跟进，1跟进中，2全部）
        typeObject: null, // 状态 查询条件
        initParams: []
      },
      PageStatus: 1
    }
  },
  mounted() {
    const self = this
    if (!_validate.checkKong(sessionStorage.sdodmStatSearchData)) {
      self.searchData = JSON.parse(sessionStorage.sdodmStatSearchData)
    }
    self.setdefault(self.searchData)
    self.customData.initParams = self.$route.params
    self.onInit()
  },
  methods: {
    onInit() {},
    onSearch() {},
    onChangePage() {},
    onReset() {},
    ONadd() {},
    onDelete(data) {},
    onInfo(data) {},
    onUpdate(data) {},
    onBathDelete() {},
    onBathUpdate() {},
    onDisable(data) {},
    onEnable(data) {},
    onUpload() {},
    onBathUpload() {},
    onExport() {},
    onDownload() {},
    onHistory() {},
    setdefault(obj) {
      if (!_validate.checkKong(obj.taskStatus)) {
        let item = null
        switch (parseInt(obj.taskStatus)) {
          case 0:
            item = {
              text: '未完成',
              value: 0
            }
            break
          case 1:
            item = {
              text: '已完成',
              value: 1
            }
            break
        }
        this.customData.typeObject = item
      }
    },
    close() {
      this.show = false
    },
    confirmFn(val) {
      this.show = false
      switch (this.customData.type) {
        case 1:
          this.customData.levelObject = _tools.cloneObj(val.select1)
          this.searchData.taskLevel = this.customData.levelObject.value
          break
        case 2:
          this.customData.typeObject = _tools.cloneObj(val.select1)
          this.searchData.taskStatus = this.customData.typeObject.value
          break
        case 3:
          this.customData.time = _tools.cloneObj(val)
          this.searchData.taskCompleteStartTime =
            this.customData.time.select1.text +
            '-' +
            this.customData.time.select2.text +
            '-' +
            this.customData.time.select3.text +
            ' ' +
            this.customData.time.select4.text +
            ':' +
            this.customData.time.select5.text
          break
      }
    },
    settype(value) {
      this.customData.type = value
      this.show = true
      this.columns = 1
      this.link = false
      this.defaultData = []
      if (this.customData.typeObject != null) {
        this.defaultData.push(this.customData.typeObject)
      }
      this.pickData.data1 = [
        {
          text: '未完成',
          value: 0
        },
        {
          text: '已完成',
          value: 1
        }
      ]
    },
    search() {
      const self = this
      this.$router.push(self.customData.initParams.path)
      sessionStorage.sdodmStatSearchData = JSON.stringify(this.searchData)
    },
    reset() {
      _tools.reset(this.searchData)
      sessionStorage.sdodmStatSearchData = ''
    }
  }
}
</script>
<style scoped>
.home {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
}
.search {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 15px;
  background: #ffffff;
}
.searchbtn {
  width: 100%;
  height: 32px;
  position: relative;
  margin-bottom: 15px;
}
.searchbtn input {
  border: none;
  width: 100%;
  height: 32px;
  background: rgba(238, 238, 238, 1);
  border-radius: 16px;
  box-sizing: border-box;
  padding: 0 16px;
  padding-left: 45px;
}
.searchbtn img {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
}
.info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-self: center;
  flex-wrap: nowrap;
  padding: 14px 0;
  border-bottom: 1px solid #e0e0e0;
}
.info:last-child {
  border: none;
}
.info h1 {
  width: 110px;
  font-size: 17px;
  font-weight: 400;
}
.info .right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.info .right span {
  display: inline-block;
  width: 90%;
}
.info .right input {
  border: none;
}
.submit {
  width: 100%;
  margin-top: 10px;
}
.submit .el-col {
  text-align: center;
}
.btn {
  width: 165px;
  height: 40px;
  background: rgba(0, 113, 206, 1);
  border-radius: 25px;
  margin: 30px auto;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
}
.btn_reset {
  background: #e4e7ed;
  color: #606266;
}
</style>
